<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-01-26 09:36:28
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="distribution" v-if="showPage">
        <el-dialog title="" :visible.sync="showDetail" width="450px" :before-close="handleClose">
            <div style="text-align: center;">
                <span style="font-size: 20px;color: #3F3F3F;">{{ id ? '修改' : '新增' }}</span>
                <div style="margin-top: 30px;display: flex;text-align: center;margin-left: 20px;">
                    <el-form :rules="rules" ref="ruleForm" :model="form" label-width="100px">
                        <el-form-item label="设备种类" prop="name">
                            <el-input v-model="form.name" style="width: 240px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item :label="`保养项目${index + 1}`" v-for="(item, index) in form.list" :key="index">
                            <el-input v-model="item.name" style="width: 240px;" clearable></el-input>
                            <img v-if="index !== 0" @click="deleteItem(index)"
                                style="cursor: pointer;margin-left: 10px;position: absolute;top: 8px;"
                                src="@/assets/按钮/按钮-删除保养项目.png" alt="">
                        </el-form-item>
                        <el-form-item label=" ">
                            <img @click="addItem" style="width: 240px;height: auto;cursor: pointer;"
                                src="@/assets/按钮/按钮_添加保养项目.png" alt="">
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="noraml-btn" @click="handleClose">取 消</el-button>
                <el-button class="noraml-btn" type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>

export default {
    props: {
        showDetail: {
            type: Boolean
        },
        id: {
            type: [String, Number]
        },
    },
    data() {
        return {
            rules: {
                name: [
                    { required: true, message: '请填写设备种类', trigger: 'blur' }
                ]
            },
            form: {
                name: '',
                list: [
                    {
                        name: ''
                    }
                ]
            },
            showPage:false
        }
    },
    mounted() {
        
        if (this.id) {
            this.$baseRequest('/sys/dict/getInfo/' + this.id,{}, {}, 'get').then(res => {
                this.form.id = res.data.id;
                this.form.name = res.data.name;
                this.form.list = res.data.dictList.map(item => {
                    return {
                        name: item.name,
                        parentId: item.parentId,
                        id: item.id
                    }
                });
                this.showPage = true;
            })
        }else {
            this.showPage = true;
        }
    },
    methods: {
        addItem() {
            this.form.list.push({
                name: ''
            })
        },
        deleteItem(index) {
            this.form.list.splice(index, 1)
        },
        handleClose(done) {
            this.$emit('closeDetail')
        },
        save() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    for (let index = 0; index < this.form.list.length; index++) {
                        if (!this.form.list[index].name) {
                            this.$message.warning('请输入保养项目');
                            return;
                        }
                    }
                    let params = [];
                    params.push({
                        name: this.form.name,
                        parentId: 1,
                        id: this.form.id
                    })
                    this.form.list.forEach(item => {
                        params.push({
                            name: item.name,
                            parentId: item.parentId || '',
                            id: item.id || ''
                        })
                    })
                    let url = this.id? '/sys/dict/revise': '/sys/dict/create';
                    let meth = this.id? 'put': 'post'
                    this.$baseRequest(url, params, {}, meth).then(res => {
                        this.$message.success(`${this.id? '修改': '添加'}成功`);
                        this.$emit('closeDetail', 'isFresh')
                    })
                } else {

                    return false;
                }
            });


        }
    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}
</style>
<style lang="scss" scoped></style>
  